<template>
    <div class="survey container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">采购合同变更</h1>
                </el-col>
            </el-row>
            <el-divider class="divider"></el-divider>
            <el-row class="export-container">
                <el-button
                    type="primary"
                    icon="el-icon-download"
                    size="mini"
                    @click="exporting"
                    >导出</el-button
                >
                <!-- <el-button
                    type="primary"
                    icon="el-icon-edit-outline"
                    size="mini"
                    @click="changeContract"
                    >合同变更</el-button
                > -->
            </el-row>
            <el-table
                ref="customerTable"
                :data="tableData"
                stripe
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :summary-method="getSummaries"
                show-summary
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                ></el-table-column>
                <el-table-column
                    type="index"
                    width="55"
                    label="序号"
                    align="center"
                />
                <el-table-column prop="projectId" label="项目">
                    <template slot-scope="scope">
                        <span>{{ scope.row.projectId || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="contractNumber" label="合同编号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.contractNumber || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="contractName" label="合同名称">
                    <template slot-scope="scope">
                        <span>{{ scope.row.contractName || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="合同金额">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="moneyUpper" label="合同金额大写">
                    <template slot-scope="scope">
                        <span>{{ scope.row.moneyUpper || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="合同类型">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 1">采购</el-tag>
                        <el-tag v-else-if="scope.row.type == 2" type="success"
                            >行政</el-tag
                        >
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="payType" label="付款方式">
                    <template slot-scope="scope">
                        <span>{{ scope.row.payType || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="projectType" label="公司项目类型">
                    <template slot-scope="scope">
                        <span>{{ scope.row.projectType || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remarks" label="变更原因">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remarks || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="合同数量">
                    <template slot-scope="scope">
                        {{ scope.row.number || "--" }}
                    </template>
                </el-table-column>
                <el-table-column prop="signTime" label="签订日期">
                    <template slot-scope="scope">
                        <span>{{ scope.row.signTime || "--" }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="详情"
                            placement="bottom"
                        >
                            <el-button
                                plain
                                icon="el-icon-more"
                                @click="handleDetail(scope.$index, scope.row)"
                                size="mini"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="编辑"
                            placement="bottom"
                        >
                            <el-button
                                type="primary"
                                plain
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                                size="mini"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="bottom"
                        >
                            <el-button
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                @click="handleDelete(scope.$index, scope.row)"
                                size="mini"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
       <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="table-pagination"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="pagesize"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
        >
        </el-pagination>
        <ContractDialog
            :previewVisible.sync="openDialog"
            :contractTempContent="contractContent"
        />
        <!-- 弹出框 -->
        <el-drawer
            :title="rowId ? '编辑采购合同变更' : '新增采购合同变更'"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose"
            size="100%"
            destroy-on-close
        >
            <div class="drawer-content">
                <FormCom ref="formRef" :id="rowId" :change="change" />
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import ContractDialog from "@/views/contract/portal/dialog/index.vue";
import { getProcureList, deleteProcureList } from "@/api/system/contract";
import FormCom from "./add/index";
export default {
    components: {
        ContractDialog,
        FormCom,
    },
    data() {
        return {
            pagesize:10,
            page:1,
            searchValue: "",
            total: 0,
            tableData: [],
            openDialog: false,
            contractContent: "",
            drawer: false, //弹窗显示
            rowId: "",
            showDetail: false,
            selectItem: "",
            change: false,
        };
    },
    methods: {
        addNewData() {},
        exporting() {},
        // 获取列表请求
        getData() {
            let isChange = 1;
            getProcureList({ 
                isChange:isChange,
                page:this.page,
                limit:this.pagesize
             }).then((res) => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }
            });
        },
        // 删除事件
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // deleteProcureList(row.id).then((res) => {
                    //     if (res.code === 200) {
                    //         this.tableData.splice(index, 1);
                    //         this.$message({
                    //             type: "success",
                    //             message: "删除成功!",
                    //         });
                    //         this.getData();
                    //     }
                    // });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 合同变更
        changeContract() {
            if (this.selectItem.length !== 1) {
                this.$message.error("请选择一条数据！");
            } else {
                // console.log("this.selectItem", this.selectItem);
                this.rowId = this.selectItem[0].id;
                this.drawer = true;
                this.change = true;
            }
        },
        // 搜索事件
        searchData() {
            // let searchValue = this.searchValue;
            // searchSurvey({ searchValue }).then((res) => {
            //   this.tableData = res.rows;
            //   console.log("请求成功", res);
            // });
        },
        //新增按钮
        addNewData() {
            this.drawer = true;
            this.rowId = "";
        },
        //编辑按钮
        handleEdit(index, row) {
            this.rowId = row.id;
            this.drawer = true;
            this.change = true;
        },
        // 详情按钮
        handleDetail(index, row) {
            this.openDialog = true;
            this.contractContent = row.contractContent;
        },
        // 保存
        submit() {
            this.$refs.formRef.onSubmit();
            this.drawer = false;
            this.getData();
        },
        // 取消
        cancelForm() {
            this.drawer = false;
            this.rowId = "";
            this.getData();
        },
        // 关闭 drawer
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                    this.rowId = "";
                    this.getData();
                })
                .catch((_) => {});
        },
        handleSelectionChange(val) {
            this.selectItem = val;
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "总计";
                    return;
                }
                if (column.property === "number") {
                    const values = data.map((item) =>
                        Number(item[column.property])
                    );
                    if (!values.every((value) => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += "";
                    } else {
                        sums[index] = "N/A";
                    }
                } else {
                    return;
                }
            });

            return sums;
        },
         // 分页
    handleSizeChange(val) {
      this.pagesize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    },
    created() {
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
.divider {
    margin: 0;
}

.export-container {
    margin: 15px 0;
}

.pagination {
    margin-top: 10px;
}
</style>
